<style>
	.turnPage {
		width: 296px;
		height: 32px;
		line-height: 32px;
		margin: 0 auto;
		border:1px solid #cacaca;
		border-radius: 6px;
		margin-top: 48px;
		margin-bottom: 106px;
	}
	.turnPage a {
		float: left;
		width: 30px;
		height: 30px;
		border-right:1px solid #cacaca;
		text-align: center;
		color: #333;
		text-decoration: none;
	}
	.turnPage a.on,.turnPage a:hover{
		background-color: #2275de;
		color: #fff;
		text-decoration: none;
	}
	.turnPage a.endArrow {
		color: #cacaca;
	}
	.turnPage a.endArrow {
		background-color: transparent;
		color: #cacaca;
	}
	.turnPage a.preA {
		width: 42px;
		border-bottom-left-radius: 6px;
		border-top-left-radius: 6px;
	}
	.turnPage a.nextP {
		width: 42px;
		border:none;
		border-bottom-right-radius: 6px;
		border-top-right-radius: 6px;
	}
	.turnPage a.noPoint {
		cursor: auto;
	}

</style>
<a href="" class="preA endArrow"><</a>
<a href="" class="on">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="" class="noPoint">...</a>
<a href="">20</a>
<a href="" class="nextP">></a>